/*
 * @Author: ray
 * @Date:   2019-06-06 10:46:48
 * @Last Modified by:   ray
 * @Last Modified time: 2019-06-09 21:25:56
 */
/**
 * ZenRadio description
 * @param {object} props [description]
 label：lable field name
 name：name variable 
 radioList：list data
 listClass：li css  className
 labelClass：label className
 inputClass：input className
 @todo: add type for recognize case that checked by props item field name
 * @example 
 const radioList = [
        {
            label: "健身",
            value: "3",
            isDisabled: true
        },
        {
            label: "修行",
            value: "9"
        },
        {
            label: "冥想",
            value: "10"
        }
    ];

    React.useEffect(() => {
        updateFormData({ test2: 9 });
    }, []);
 <ZenRadio labelName="label" valueName="valueName" formData={formData} name="test2" radioList={testList} change={onChange} />

 */
import './ZenRadio.css';
export default function ZenRadio(props) {
	let {
		formData,
		name,
		labelName,
		valueName,
		radioList,
		listClass,
		change,
		labelClass,
		inputClass
	} = props;
	labelName = labelName || "label";
	valueName = valueName || "value";
	change = change || function() {};

	return (
		<div>
			{radioList &&
				radioList.map(function(item, index) {
					return (
						<span
							className={Uts.sc([
								"ZenRadio zen_p-v-2 zen_il-bl zen_r-8",
								listClass
							])}
							key={item[valueName]}
						>
							<label
								className={Uts.sc([
									"zen_il-bl zen_m-r-10",
									labelClass
								])}
							>
								<input
									type="radio"
									name={name}
									onChange={change}
									className={inputClass}
									value={item[valueName]}
									checked={item[valueName] == formData[name]}
									disabled={item.isDisabled}
								/>
								{item[labelName]}
							</label>
						</span>
					);
				})}
		</div>
	);
}
